<template>
  <div class="info">
    <navbar title="个人信息" @back="back" needSave="true" @save="save"></navbar>
    <div class="content">
      <van-cell-group>
        <van-cell title="头像" @click="editphp" class="toux" is-link center>
          <van-image
            slot="default"
            width="1.5rem"
            height="1.5rem"
            fit="cover"
            round
            :src="user.photo"
          ></van-image>
        </van-cell>

        <van-cell title="昵称" @click="editnike" is-link>
          <template #default>
            <span>{{ user.name }}</span>
          </template>
        </van-cell>
        <van-cell title="介绍" is-link @click="introShow = true">
          <template #default>
            <span>{{ getInfo || introInfo }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="content">
      <van-cell-group>
        <van-cell title="性别" is-link @click="DgenderShow">
          <template #default>
            <span v-if="gender === 0">男</span>
            <span v-else>女</span>
          </template>
        </van-cell>
        <van-cell title="生日" is-link @click="birthdayShow = true">
          <template #default>
            <span>{{ user.birthday }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 修改头像弹出层 -->
    <van-popup v-model="show" class="mypop" :style="{ width: '90%' }">
      <div class="box">
        <van-uploader :after-read="afterRead" v-model="fileList" :max-count="1">
          <template #default>
            <div class="myphp">从相册中选择</div>
          </template>
        </van-uploader>
        <div>拍照</div>
      </div>
    </van-popup>
    <!-- 修改昵称弹出层 -->
    <van-popup v-model="nikeShow" position="bottom">
      <van-field v-model="value">
        <template #button>
          <van-button size="small" @click="changenike" type="info"
            >修改</van-button
          >
        </template>
      </van-field>
    </van-popup>
    <!-- 修改个人简介弹出层 -->
    <van-popup v-model="introShow" position="bottom">
      <van-field v-model="introInfo" @keyup.enter="changeinrto" />
    </van-popup>
    <!-- 修改男女性别 -->
    <van-popup v-model="genderShow" position="bottom">
      <van-picker
        title="修改性别"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <!-- 修改生日 -->
    <van-popup v-model="birthdayShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="changeonconfirm"
        @cancel="changecancel"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
import { edtiInfo, getInfo, edtifile, newDate } from '../../../api/user'
export default {
  name: 'info',
  data () {
    return {
      // 图片信息
      fileList: [],
      // 弹出层数据
      show: false,
      // 昵称弹出层数据
      nikeShow: false,
      value: '',
      userInfo: {},
      // 简介数据
      introShow: false,
      introInfo: '',
      // 男女数据
      genderShow: false,
      gender: '',
      columns: ['男', '女'],
      // 时间数据
      birthdayShow: false,
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(),
      currentDate: new Date()
    }
  },
  computed: {
    ...mapState(['user']),
    ...mapGetters(['getInfo'])
  },
  methods: {
    // 定义辅助函数
    ...mapActions(['getUser']),
    ...mapMutations(['setUser']),
    // 点击保存时间
    save () {
      this.$router.push('/my')
    },
    // 上传照片事件
    async afterRead (file) {
      this.fileList = []
      console.log(file.file)
      const fd = new FormData()
      fd.append('photo', file.file)
      const res = await edtifile(fd)
      console.log(res)
      this.getUser()
      this.show = false
    },
    // 图片上传之前的回调
    beforeRead (file) {
      // 格式要求
      if (file.type !== 'image/jpeg') {
        this.$toast.fail('请上传 jpg 格式图片')
        return false
      }
      if (!file.size / 1024 / 1024 < 2) {
        this.$toast.fail('请上传 小于2m 格式图片')
        return false
      }

      return true
    },
    // 点击修改日期
    async changeonconfirm () {
      const birthday = newDate(this.currentDate)
      const res = await edtiInfo({ birthday })
      console.log(res)
      this.$toast.success('修改成功')
      this.getUser()
      this.birthdayShow = false
    },
    changecancel () {
      this.$toast('取消')
      this.birthdayShow = false
    },
    // 修改性别
    async onConfirm (value) {
      console.log(value)
      const res = await edtiInfo({ value })
      console.log(res)
      this.getUser()
      this.genderShow = false
    },
    onCancel () {
      this.$toast('取消')
      this.genderShow = false
    },
    // 修改个人简介
    async changeinrto () {
      const res = await edtiInfo({
        intro: this.introInfo
      })
      // this.introInfo = res.data.data.intro
      this.$set(this.user, 'introInfo', res.data.data.intro)
      this.introShow = false
    },
    // 修改昵称
    async changenike () {
      await edtiInfo({
        name: this.value
      })
      this.getUser()
      this.nikeShow = false
    },
    // 点击打开弹出层
    async editnike () {
      this.nikeShow = true
    },
    // 点击修改头像
    editphp () {
      this.show = true
    },
    // 点击回退功能
    back () {
      this.$router.back()
    },
    DgenderShow () {
      this.genderShow = false
      this.$nextTick(() => {
        this.genderShow = true
      })
    }
  },
  async created () {
    // 拿到当前昵称
    this.value = this.user.name
    this.gender = this.user.gender
    const res = await getInfo()
    this.userInfo = res.data.data
    this.introInfo = res.data.data.intro
    this.fileList.push({
      url: this.user.photo
    })
  }
}
</script>

<style lang="less" scoped>
.info {
  background-color: #f5f7f9;
  .content {
    margin-top: 5px;
    padding-left: 5px;
    background-color: #fff;
    .toux {
      line-height: 22px;
      img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }
    }
  }
  .box {
    overflow: hidden;
    .van-uploader {
      width: 100%;
      /deep/ .van-uploader__input {
        position: relative;
        top: -109px;
        left: 0px;
      }
      .myphp {
        margin: 0 auto;
      }
    }

    div {
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-bottom: 1px solid #ccc;
    }
  }
  /deep/ .van-field__control {
    background-color: #f7f4f5;
    border-radius: 4px;
  }
  .mypop {
    /deep/ .van-uploader__upload,
    /deep/ .van-uploader__preview-image {
      width: 400px;
      height: 400px;
    }
  }
}
</style>
